<script>
	export default {
		globalData: {
			currentTheme: 'light',
			isOffline: false
		},
		onLaunch() {
			this.checkNetwork()
			uni.onNetworkStatusChange((res) => {
				this.globalData.isOffline = !res.isConnected
			})
		},
		onShow() {
			this.initTheme()
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			initTheme() {
				// 自动应用主题
				const themeIndex = uni.getStorageSync('setting_themeIndex') || 0
				let theme = 'light'
				
				if (themeIndex === 0) {
					// 跟随系统
					uni.getSystemInfo({
						success: (res) => {
							theme = res.theme || 'light'
							this.setTheme(theme)
						}
					})
				} else if (themeIndex === 1) {
					theme = 'light'
					this.setTheme(theme)
				} else if (themeIndex === 2) {
					theme = 'dark'
					this.setTheme(theme)
				}
			},
			setTheme(theme) {
				this.globalData.currentTheme = theme
				
				// H5 环境使用 document
				if (typeof document !== 'undefined' && document.documentElement) {
					document.documentElement.setAttribute('data-theme', theme)
					console.log('App.vue H5 主题设置为:', theme)
				}
				
				// App 环境使用全局数据
				console.log('App.vue 全局主题设置为:', theme)
			},
			checkNetwork() {
				uni.getNetworkType({
					success: (res) => {
						this.globalData.isOffline = (res.networkType === 'none')
					}
				})
			}
		}
	}
</script>

<style>
/* 全局主题变量 */
:root {
	--bg-color: #f5f5f5;
	--text-color: #333;
	--card-bg: #fff;
	--card-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	--border-color: #f0f0f0;
	--primary-color: #007aff;
	--danger-color: #ff3b30;
}

/* 深色主题 */
[data-theme="dark"] {
	--bg-color: #1a1a1a !important;
	--text-color: #ffffff !important;
	--card-bg: #2d2d2d !important;
	--card-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3) !important;
	--border-color: #404040 !important;
	--primary-color: #4f8cff !important;
	--danger-color: #ff5c5c !important;
	.tip-text{
		color:#ffffff !important;
	}
	.header-title{
		color:#ffffff !important;
	}
	.backup-container{
		.option-card .option-title{
			color:#ffffff !important;
		}
		 .option-card .option-desc{
			margin-left: 10rpx;
			color:#989898 !important;
		}
		.stats-section .stats-card .stat-item{
				color:#989898 !important;
				.stat-label{
					color: #fff !important;
				}
				.stat-value{
					color:#ccc;
				}
		}
	}
	.generator-container{
		.password-display,.password-box{
			background-color: unset !important;
			.password-text{
				color:#cccccc !important;
			}
			border:1rpx solid;
			box-shadow: 0 1px 4px rgba(181, 181, 181, 0.0) !important;
		}
		.options-section,.history-section{
			background-color: unset !important;
			.option-label,.checkbox-label{
				color:#fff !important;
			}
		}
		.history-item{
			.history-password{
				color:#ccc !important;
			}
			
		}
		color:#fff !important;
		.password-display{
			background-color: black;
		}
	}
	 
	
}

/* 应用主题变量 */
.container {
	background: var(--bg-color) !important;
	color: var(--text-color) !important;
}

.settings-list, .password-list, .stats-card, .option-card, .tips-list, .cloud-status {
	background: var(--card-bg) !important;
	box-shadow: var(--card-shadow) !important;
	color: var(--text-color) !important;
}

.setting-item {
	border-bottom-color: var(--border-color) !important;
}

.item-label, .title, .section-title {
	color: var(--text-color) !important;
}

.item-value, .subtitle {
	color: var(--text-color) !important;
	opacity: 0.7;
}

/* 保持按钮颜色不变 */
.danger-btn {
	background: var(--danger-color) !important;
	color: #fff !important;
}

.theme-option.active {
	background: var(--primary-color) !important;
	color: #fff !important;
	border-color: var(--primary-color) !important;
}

.offline-banner {
	background: #fffae6;
	color: #d48806;
	text-align: center;
	padding: 10rpx 0;
	font-size: 26rpx;
}
</style>
